<template>
  <div class="goodsDetails">
    <header>
      <span
        class="iconfont icon-zuojiantou left"
        @click="skip_secendHand"
      ></span>
      <span class="right iconfont icon-gengduo"></span>
    </header>
    <div class="pic">
      <van-swipe
        class="my-swipe"
        :autoplay="5000"
        indicator-color="#ff5654"
        touchable
      >
        <van-swipe-item v-for="(item, index) in imgSrc" :key="index">
          <img :src="item" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="content">
      <div class="title">
        <h2>{{ name }}</h2>
        <ul>
          <li><i class="iconfont icon-fenxiang"></i></li>
          <li>分享</li>
        </ul>
      </div>
      <span> ￥{{ price }} </span>
      <ul>
        <li>
          {{ describe }}
        </li>
      </ul>
    </div>
    <van-goods-action>
      <van-goods-action-icon icon="service-o" color="#ee0a24" />
      <van-goods-action-icon icon="shopping-cart-o" @click="skipCart"/>
      <van-goods-action-icon
        icon="like-o"
        :color="likecolor"
        @click="addCollect"
      />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="addCart"
      />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
import { getAddCollect, getAddCart, getCollect, getDeleteCollect } from "../../../api/index.js";
import { Notify } from "vant";
export default {
  data() {
    return {
      likecolor: '#ccc',
      imgSrc: [
        "https://img1.baidu.com/it/u=2874339507,1028351752&fm=15&fmt=auto",
        "https://img2.baidu.com/it/u=3479735034,14809501&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=415",
        "https://img0.baidu.com/it/u=4288301912,1647833482&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=415",
        "https://img2.baidu.com/it/u=2356823733,2765141048&fm=253&fmt=auto&app=138&f=JPEG?w=603&h=500",
        "https://img0.baidu.com/it/u=17536218,673175139&fm=26&fmt=auto",
        "https://img1.baidu.com/it/u=2324601096,1008940304&fm=15&fmt=auto",
      ],
      name: "纯白家具布艺沙发",
      price: "998-1180",
      describe: [
        "选择合适家中空间的尺寸和形状，为每位家庭成员打造一个最爱的角落。",
        "侧边触手可及的口袋可存放遥控器，避免遥控器埋在枕头和休闲毯下面。",
      ],
      goodsID: JSON.parse(window.localStorage.getItem("currentGoods")).id,
      flag: false
    };
  },
  methods: {
    skip_secendHand() {
      this.$router.push("/secend_hand");
    },
    skipCart(){
      this.$router.push("/shopping_cart")
    },
    async initDetails() {
      let details = this.$store.state.currentGoods;
      let localDetails = JSON.parse(
        window.localStorage.getItem("currentGoods")
      );
      if (details.id) {
        this.name = details.name;
        this.describe = details.describe;
        this.price = details.price;
      } else {
        this.name = localDetails.name;
        this.describe = localDetails.describe;
        this.price = localDetails.price;
      }
      // 获取收藏
      // let flag = false
      let { data } = await getCollect(window.localStorage.getItem("user_id"))
      console.log(data)
      if(data) {
        data.map( (item,index) => {
          if(item.id == details.id || item.id == localDetails.id) {
            // 当前商品已收藏，则收藏按钮变灰
            this.flag = true
          }
        } )
      }
      if(this.flag) {
        // 已收藏，按钮显示红色
        this.likecolor = '#ff5654'
      }else {
        // 未收藏则显示为灰色
        this.likecolor = '#ccc'
      }
    },
    // 添加收藏
    async addCollect() {
      // 判断当前商品是否是收藏的商品
      if(!this.flag) {
        // 未收藏，则添加收藏
        let obj = {
          userID: window.localStorage.getItem("user_id"),
          goodsID: this.goodsID
        };
        let { meta: { status } } = await getAddCollect(obj);
        // 收藏成功后提示用户已收藏
        if(status == 200) {
          Notify({
            message: "已收藏",
            color: '#fff',
            background: '#97a38b',
            duration: 500
          });
          this.likecolor = '#ff5654'
          this.flag = !this.flag
          this.initDetails()
        }
      }else {
        // 已收藏，则取消收藏
        let obj = {
          uid: window.localStorage.getItem("user_id"),
          gid: this.goodsID
        };
        let { meta: {status} } = await getDeleteCollect(obj);
        if(status == 200) {
          Notify({
            message: "已取消收藏",
            color: '#fff',
            background: '#97a38b',
            duration: 500
          });
          this.likecolor = '#ccc'
          this.flag = !this.flag
          this.initDetails()
        }
      }
    },
    async addCart() {
      let obj = {
        userID: window.localStorage.getItem("user_id"),
        goodsID: this.goodsID
      };
      let { meta: { status } } = await getAddCart(obj)
      let res = await getAddCart(obj)
      console.log(res);
      if(status == 200) {
        Notify({
          message: "添加购物车成功",
          color: '#fff',
          background: '#97a38b',
          duration: 500
        });
      }
    },
  },
  created() {
    this.initDetails();
  },
};
</script>

<style scoped lang='less'>
* {
  padding: 0;
  margin: 0;
}
header {
  width: 100%;
  height: 88px;
  background-color: #ff5654;
  span {
    font-size: 36px;
    display: inline-block;
    margin-left: 20px;
    color: #fff;
    line-height: 88px;
  }
  .right {
    float: right;
    margin-right: 30px;
  }
}

.van-popup--top {
  width: 110px;
}
.van-popup {
  left: 50%;
  top: 50%;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  height: 622px;
  text-align: center;
  background-color: #fff;
  img {
    width: 750px;
    height: 620px;
  }
}
/deep/.van-swipe__indicator {
  background-color: #fff;
}
.content {
  margin: 64px 30px 0;
  .title {
    h2 {
      display: inline-block;
      font-size: 34px;
      margin-bottom: 32px;
      color: #505050;
    }
    ul {
      float: right;
      margin-top: -10px;
      li {
        font-size: 20px;
        color: #575757;
        &:nth-child(1) {
          margin-bottom: 18px;
          i {
            font-size: 36px;
          }
        }
      }
    }
  }
  span {
    font-size: 34px;
    color: #ff5654;
  }
  ul {
    margin-top: 20px;
    li {
      font-size: 30px;
      color: #505050;
    }
  }
}
.van-goods-action {
  border-top: 1px solid #ff5654;
  /deep/.van-icon {
    color: #ff5654;
    font-size: 60px;
    // font-weight: 700;
  }
  /deep/.van-goods-action-button--first,
  .van-goods-action-button--last {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    height: 100%;
    margin-right: 0;
  }
}
</style>